<template>
  <div class="login-form login-signin">
    <div class="pb-13 pt-lg-0 pt-5">
      <h3 class="font-weight-bolder text-dark font-size-h4 font-size-h1-lg">
        创建一个新的账户
      </h3>
    </div>
    <div class="form-group">
      <div class="d-flex justify-content-between mt-n5">
        <label class="font-size-h6 font-weight-bolder text-dark pt-5"
          >邮箱</label
        >
      </div>
      <div id="example-input-group-2" label="" label-for="example-input-2">
        <input
          class="form-control form-control-solid h-auto py-7 px-6 rounded-lg"
          type="email"
          name="email"
          placeholder="请输入可用邮箱"
          v-model="email"
          @change="checkEmail"
        />
        <div class="warning">{{ errorEmail }}</div>
      </div>
    </div>
    <div class="form-group">
      <div class="d-flex justify-content-between mt-n5">
        <label class="font-size-h6 font-weight-bolder text-dark pt-5"
          >密码</label
        >
      </div>
      <div id="example-input-group-2" label="" label-for="example-input-2">
        <input
          class="form-control form-control-solid h-auto py-7 px-6 rounded-lg"
          type="password"
          name="password"
          placeholder="请输入密码"
          v-model="password"
          autocomplete="off"
          @change="checkPwd"
        />
        <div class="warning">{{ errorPwd }}</div>
      </div>
    </div>
    <div class="form-group">
      <div class="d-flex justify-content-between mt-n5">
        <label class="font-size-h6 font-weight-bolder text-dark pt-5"
          >确认密码</label
        >
      </div>
      <div id="example-input-group-2" label="" label-for="example-input-2">
        <input
          class="form-control form-control-solid h-auto py-7 px-6 rounded-lg"
          type="password"
          name="rePassword"
          placeholder="请再次输入您的密码"
          v-model="rePassword"
          autocomplete="off"
          @change="checkRePwd"
        />
        <div class="warning">{{ errorRePwd }}</div>
      </div>
    </div>
    <div class="pb-lg-0 pb-5">
      <button
        class="btn btn-primary font-weight-bolder font-size-h6 px-15 py-4 my-3 mr-3"
        @click="submitRegister()"
      >
        提 交
      </button>
      <button
        class="btn btn-success font-weight-bolder font-size-h6 px-15 py-4 my-3 mr-3"
        style="background-color: grue"
        @click="cancel()"
      >
        取 消
      </button>
    </div>
  </div>
</template>
<script>
export default {
  name: "RegisterFrom",
  data() {
    return {
      errorEmail: "",
      errorPwd: "",
      errorRePwd: "",
      year: new Date().getFullYear(),
      email: "",
      password: "",
      rePassword: "",
    };
  },
  mounted() {},
  methods: {
    checkEmail() {
      let rule = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
      let text = "";
      if (!rule.test(this.email)) {
        text = "邮箱格式输入有误";
      } else {
        text = "";
      }
      this.errorEmail = text;
    },
    checkPwd() {
      let rule = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;
      let text = "";
      if (!rule.test(this.password)) {
        text = "最少六位，需要英文字母大小写、数字和特殊字符";
      } else {
        text = "";
      }
      this.errorPwd = text;
    },
    checkRePwd() {
      let text = "";
      if (this.password != this.rePassword) {
        text = "密码不一致";
      } else {
        text = "";
      }
      this.errorRePwd = text;
    },
    submitRegister() {
      this.$axios({
        headers: {
          "Content-Type": "application/json;charset=UTF-8",
        },
        url: "/api/user/preRegisterUser",
        method: "post",
        params: {
          email: this.email,
          password: this.password,
        },
      })
        .then((response) => {
          sessionStorage.setItem("email", this.email);
          if (response.status == 0) {
          }
          switch (response.status) {
            case 0:
              this.openActiveForm();
              break;
            case 10:
              this.$message({
                message: response.msg,
                type: "error",
              });
          }
        })
        .catch((error) => {
          console.log(error);
        });
    },
    cancel() {
      this.$parent.openLoginForm();
    },
    openActiveForm() {
      this.$parent.openActiveForm();
    },
  },
};
</script>
